<template>
    <div class="point-pool-wrapper"
        v-draggable-resizable="{
            storageKey: 'pointPool',
            controlPosition: 'top',
            hideHintText: '积分池'
        }"
    >
        <span class="team-name left" :style="teamNameStyle">
            <span>{{ props.redName }}</span>
        </span>
        <div class="point-pool-container">
            <div class="hp-bar red" :style="hpBarStyle" :class="{ 'hp-hidden': redHpMax <= -1 }">   
                <div class="hp-fill" :style="{ width: redHpPercent }"></div>
                <span class="hp-text">{{ props.redHpCurrent }}/{{ props.redHpMax }}</span>
            </div>
            <img class="team-icon red-icon" :src="redIcon" alt="红方图标">
            <div class="point-pool">
                <img class="point-pool-img" :style="poolImgStyle" src="@/assets/xinJi/images/pointPool/redBall.png" alt="红球" />
            </div>
            <span class="points-text points-overlay" :style="textStyle" :class="{ 'points-animate': isAnimating }">{{ formattedPoints }}</span>
            <img class="team-icon blue-icon" :src="blueIcon" alt="蓝方图标">
            <div class="hp-bar blue" :style="hpBarStyle" :class="{ 'hp-hidden': blueHpMax <= -1 }">
                <div class="hp-fill" :style="{ width: blueHpPercent }"></div>
                <span class="hp-text">{{ props.blueHpCurrent }}/{{ props.blueHpMax }}</span>
            </div>
        </div>
        <span class="team-name right" :style="teamNameStyle">
            <span>{{ props.blueName }}</span>
        </span>
    </div>
</template>

<script lang="ts" setup>
import { defineProps, computed, ref, watch } from 'vue';
import Icon1_1 from '@/assets/xinJi/images/pointPool/1-1.png';
import Icon1_2 from '@/assets/xinJi/images/pointPool/1-2.png';
import Icon2_1 from '@/assets/xinJi/images/pointPool/2-1.png';
import Icon2_2 from '@/assets/xinJi/images/pointPool/2-2.png';
import Icon3_1 from '@/assets/xinJi/images/pointPool/3-1.png';
import Icon3_2 from '@/assets/xinJi/images/pointPool/3-2.png';

const props = defineProps({
    points: { type: Number, required: true },
    scale: { type: Number, default: 1 },
    redHpCurrent: { type: Number, required: true },
    redHpMax: { type: Number, required: true },
    blueHpCurrent: { type: Number, required: true },
    blueHpMax: { type: Number, required: true },
    blueName: { type: String, default: '蓝方' },
    redName: { type: String, default: '红方' }
});

// 动画状态
const isAnimating = ref(false);

// 监听积分变化，触发动画
watch(() => props.points, (newValue, oldValue) => {
    if (newValue !== oldValue) {
        isAnimating.value = true;
        setTimeout(() => {
            isAnimating.value = false;
        }, 300);
    }
});

const formattedPoints = computed(() => {
    const p = props.points;
    if (p >= 10000) {
        // 保留两位小数，且去掉多余的0
        const val = (p / 10000).toFixed(2).replace(/\.00$/, '').replace(/(\.\d)0$/, '$1');
        return `${val}万`;
    }
    // 小于1万时，显示千分位分隔符
    return p.toLocaleString();
});

// 文本样式：动态字体大小
const textStyle = computed(() => {
    const s = props.scale;
    return {
        fontSize: `${16 * s}px`
    };
});

// 血条容器样式
const hpBarStyle = computed(() => {
    const s = props.scale;
    const width = `${240 * s}px`;
    const height = `${20 * s}px`;
    return {
        width,
        height,
        lineHeight: height,
        margin: `0 ${8 * s}px`
    };
});

// 队伍名字样式
const teamNameStyle = computed(() => {
    const s = props.scale;
    return {
        fontSize: `${22 * s}px`,
    };
});

// 计算血条填充百分比
const redHpPercent = computed(() => {
    const c = props.redHpCurrent;
    const m = props.redHpMax;
    return `${Math.max(0, Math.min(100, (c / m) * 100))}%`;
});
const blueHpPercent = computed(() => {
    const c = props.blueHpCurrent;
    const m = props.blueHpMax;
    return `${Math.max(0, Math.min(100, (c / m) * 100))}%`;
});

// 计算红方血量比例
const redRatio = computed(() => {
    const r = props.redHpCurrent > 0 ? props.redHpCurrent : 0;
    const b = props.blueHpCurrent > 0 ? props.blueHpCurrent : 0;
    const total = r + b;
    if (total === 0) return 0.5; // 默认一半一半
    return r / total;
});

const redIcon = computed(() => {
    if (props.redName === '人族') { return Icon1_1; }
    else if (props.redName === '虫族') { return Icon2_1; }
    else if (props.redName === '神族') { return Icon3_1; }

    return Icon1_1;
});
const blueIcon = computed(() => {
    if (props.blueName === '人族') { return Icon1_2; }
    else if (props.blueName === '虫族') { return Icon2_2; }
    else if (props.blueName === '神族') { return Icon3_2; }

    return Icon1_2;
});

// 计算point-pool-img的宽度（基于红方血量占比，从右往左缩短）
const poolImgStyle = computed(() => {
    const ratio = redRatio.value; // 红方占比，0-1之间
    const s = props.scale;
    const fullWidth = 45 * s; // 完整宽度
    const currentWidth = fullWidth * ratio; // 当前宽度基于红方占比
    
    return {
        width: `${currentWidth}px`,
        height: `${45 * s}px`,
        objectFit: 'cover' as const,
        objectPosition: 'left center' as const // 从左边开始显示图片，右边被裁剪
    };
});
</script>

<style scoped lang="less">
.point-pool-wrapper {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;

    .team-name {
        color: white;
        font-weight: bold;
        white-space: nowrap;
        width: 60px;
        text-align: center;
        flex-shrink: 0;
        transition: opacity 0.3s ease;

        &.left {
            color: white;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
        }

        &.right {
            color: white;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
        }
    }

    .point-pool-container {
        position: relative;
        height: 61px;
        width: 604px;
        background-image: url('@/assets/xinJi/images/pointPool/bg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;

        .team-icon {
            position: absolute;
            top: 21px;
        }

        .red-icon {
            left: 8px;
        }

        .blue-icon {
            right: 8px;
        }

        .hp-bar {
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            transition: opacity 0.3s ease;
            height: 16px;
            width: 250px;

            .hp-fill {
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                height: 100%;
                transition: width 0.3s ease;
            }

            .hp-text {
                position: relative;
                z-index: 1;
                color: white;
                font-size: 0.75em;
                pointer-events: none;
                white-space: nowrap;
            }

            &.red {
                position: absolute;
                left: 22px;
                top: 19px;
                border-radius: 0 9px 0 0;
                .hp-fill {
                    background-image: linear-gradient( 0deg, rgb(77,0,0) 0%, rgb(123,0,0) 52%, rgb(168,0,0) 100%);
                }
            }

            &.blue {
                position: absolute;
                right: 22px;
                top: 19px;
                border-radius: 9px 0 0 0;
                .hp-fill {
                    position: absolute;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    height: 100%;
                    left: auto;
                    background-image: linear-gradient( 0deg, rgb(17,24,42) 0%, rgb(11,31,92) 52%, rgb(5,38,141) 100%);
                }
            }
        }
        
        .point-pool {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-47%, -52%);
            display: flex;
            align-items: center;
            justify-content: flex-start; // 改为左对齐，保持图片位置固定
            color: white;
            overflow: visible; // 允许数字溢出球体
            height: 47px;
            width: 47px;
            overflow: hidden;
            
            .point-pool-img {
                height: 45px;
                width: 45px;
                transition: width 0.3s ease;
                object-fit: cover;
                object-position: left center;
                flex-shrink: 0; // 防止flex收缩
            }
        }

        .points-text {
            white-space: nowrap;
            transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);

            &.points-animate {
                animation: pointsScale 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            }

            // 让分数文字始终在最上层并有阴影
            &.points-overlay {
                position: absolute;
                left: 50%;
                top: 50%;
                z-index: 2;
                transform: translate(-50%, -50%);
                color: #fff;
                text-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 0 2px #fff;
                font-weight: bold;
                pointer-events: none;
            }
        }

        @keyframes pointsScale {
            0% {
                transform: translate(-50%, -50%) scale(1);
            }
            50% {
                transform: translate(-50%, -50%) scale(1.3);
            }
            100% {
                transform: translate(-50%, -50%) scale(1);
            }
        }
    }
}


</style>